<template>
    <div class="container">
        <div class="demo">
            <div class="demo-title">设置参数</div>
            <div class="demo-params">
                <div class="item">
                    <div class="l">标题</div>
                    <div class="r">
                        <input type="text" v-model="title" placeholder="标题" />
                    </div>
                </div>
                <div class="item">
                    <div class="l">是否显示头部</div>
                    <div class="r">
                        <label for="showHeader-true">是</label>
                        <input id="showHeader-true" type="radio" name="showHeader" v-model="showHeader" :value="true" checked/>
                        <label for="showHeader-false">否</label>
                        <input id="showHeader-false" type="radio" name="showHeader" v-model="showHeader" :value="false"/>
                    </div>
                </div>
                <div class="item">
                    <div class="l">是否显示遮罩层</div>
                    <div class="r">
                        <label for="mask-true">是</label>
                        <input id="mask-true" type="radio" name="mask" v-model="mask" :value="true" checked/>
                        <label for="mask-false">否</label>
                        <input id="mask-false" type="radio" name="mask" v-model="mask" :value="false"/>
                    </div>
                </div>
            </div>
            <button @click="show = true">打开</button>
        </div>
        <brsPopup :open.sync="show" :title="title" :mask="mask" :showHeader="showHeader"></brsPopup>
    </div>
</template>

<script>
import brsPopup from "@/components/popup"
export default {
    name: 'demo-popup',
    data (){
        return {
            show: false,
            title: '',
            showHeader: true,
            mask: true
        }
    },
    components: { brsPopup }
}
</script>

<style lang="less" scoped>

</style>